
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Adjusting a page theme on the fly</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>

<!--there is no custom header content for this example-->

</head>

<body class=" yui-skin-sam">

<h1>Adjusting a page theme on the fly</h1>

<div class="exampleIntro">
	<p>In this example, we'll change some colors in this page's color theme.  Enter any valid CSS color value into the inputs and submit the changes to see them applied to the page.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="demo">
    <form id="demo_form" action="#" method="get">
        <fieldset>
            <p>Example values: #123456 or #123 or rgb(0,10,30) or red</p>
            <label for="demo_headings">Headings and labels</label>
                <input type="text" size="7" id="demo_headings" value="#e76300">
            <pre><code>h1,h2,h3,h4,h5,h6,
#demo label {
    color: <em id="demo_heading_value">#e76300</em>;
}</code></pre>

            <label for="demo_bg">Demo background</label>
                <input type="text" size="7" id="demo_bg" value="#F1F6F7">
            <pre><code>.example-container {
    background-color: <em id="demo_background_value">#F1F6F7</em>;
}</code></pre>
            <label for="demo_hover">Left nav hover color</label>
                <input type="text" size="7" id="demo_hover" value="#28b">
            <pre><code>#bd .toc3 li.selected a,
#bd .toc3 li a:hover {
    color: <em id="demo_hover_value">#28b</em>;
}</code></pre>

        </fieldset>
        <p>
            <input type="submit" id="update" value="Update theme">
        </p>
    </form>
</div>

<script type="text/javascript">

//Create a new YUI instance, requiring node and stylesheet
YUI({base:"../../build/", timeout: 10000}).use("node", "stylesheet", function (Y) {
	
	var Demo = {};
	
	//We need a validator to make sure we're not trying to set
	//invalid color values in StyleSheet:
	Demo.isValidColor = function (v) {
			return /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(v) ||
				   /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(v) ||
				   /^[a-z]+$/i.test(v);
	}

	//When the DOM is ready, we'll initialize the example,
	//creating our StyleSheet instance and adding our event 
	//listeners:
    Demo.init = function () {
	
        // Create a new StyleSheet instance for us to override some current
        // page styles.  For illustration, we'll seed it with the CSS to 
		// style the demo form.  Note that you wouldn't want to use this 
		// as a standard technique; the initial styling of your content
		// should come from .css files included in link elements.  However,
		// this block of code illustrates how a block of style information
		// can be applied to the page on demand:
        Demo.theme = Y.StyleSheet("\
            #demo form,\
            #demo fieldset {\
                border: none; padding: 0; margin: 0;\
            }\
            #demo fieldset p {\
                background: #fff;\
                border: 1px solid #ccc;\
                padding: 1em 1ex;\
            }\
            #demo pre code {\
                background: #fff;\
                border: 1px solid #ccc;\
                color: #555;\
                display: block;\
                font-weight: normal;\
                margin: 1ex 0 1em;\
                padding: 1ex;\
            }\
            #demo label {\
                font-weight: bold;\
                color: #e76300;\
            }\
            #demo pre code em {\
                color: #000;\
                font-weight: bold;\
            }\
        ");

        // Store Node references for the input fields for value retrieval
        Demo.headings   = Y.get('#demo_headings');
        Demo.background = Y.get('#demo_bg');
        Demo.hover      = Y.get('#demo_hover');

        // Set up the submit handler to update the page styles and to
		// prevent the default action of the form:
        Y.on('submit', function (e) {
            e.halt();
            Demo.update();
        }, '#demo_form');
		
		//Log a message that the example is ready:
		Y.log("The example has been initialized.", "info", "example");
    }

	//The event handler that process changes in the form field
	//values.  Each time the form is submitted, we check the 
	//validity of the submitted values and, if valid, apply
	//them using our StyleSheet instance.
    Demo.update = function () {
	
        var v = Y.Lang.trim(Demo.headings.get("value"));
        if (Demo.isValidColor(v)) {
            // multiple selectors are delimited by commas
            Demo.theme.set('h1,h2,h3,h4,h5,h6, #demo label', { color : v });
            Y.get('#demo_heading_value').set("innerHTML", v);
        } else {
			Y.log("The value submitted for headings was not valid.", "info", "example");
		}

        v = Y.Lang.trim(Demo.background.get("value"));
        if (Demo.isValidColor(v)) {
            // use camelCase for style property names
            Demo.theme.set('.example-container', { backgroundColor : v });
            Y.get('#demo_background_value').set("innerHTML", v);
        } else {
			Y.log("The value submitted for background was not valid.", "info", "example");
		}

        v = Y.Lang.trim(Demo.hover.get("value"));
        if (Demo.isValidColor(v)) {
            Demo.theme.set(
                '#bd .toc3 li.selected a,'+
                '#bd .toc3 li a:hover', { color : v });

            Y.get('#demo_hover_value').set("innerHTML", v);
        } else {
			Y.log("The value submitted for hover color was not valid.", "info", "example");
		}

		//Log a message that the update was processed fully:
		Y.log("The stylesheet has been updated.", "info", "example");

    }

	// Initialize the example when the DOM is ready
	Y.on("domready", Demo.init);

});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
